<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购买服务</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />	
		<link rel="stylesheet" href="../css/MUIxinyingCss.css"/>
		<link rel="stylesheet" href="../css/default.css"/>
		<link rel="stylesheet" href="../css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="payApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="line" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<a href="##" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</a>
				<h1 class="mui-center mui-title">购买服务</h1>
			</div>
			<!--页面标题栏结束-->
			
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="service_box">
							<div class="message_con margin">
						        <div class="active clear no_border">图文咨询<span>王秋兰医生 妇科</span></div>
						    </div>
							<div class="zffs">
						        	<p class="active">使用问诊卷<span>(每张总论卷可以为您抵扣十元)</span></p>
						    </div>
						    <div class="need_pay active">
						        <div class="message_con for_right">
						            <p><a href="#count" class="clear">请选择问卷数量：<span id="count_a">5</span></a></p>
						        </div>
						        <div class="message_con margin1">
						            <div class="active clear">共需支付<span class="count">￥<big>35</big>元</span></div>
						        </div>
						    </div>
						    <h1 class="pay_style">请选择支付方式</h1>
						    <ul class="mui-table-view mui-table-view-radio shopping">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">微信</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">支付宝</a>
								</li>
							</ul>
							<div class="feedback">
								<h2 class="screenshot_h">医疗设备截图</h2>
							<div id='image-list' class="row image-list"></div>
							</div>
							<div class="now_pay"><a href="#img_servie_form" class="mui-btn mui-btn-block ">立即购买</a></div>
							
						</div>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<!--<script type="text/javascript">
			
		</script>-->
		<!--图文咨询表格-->
		<div id="img_servie_form" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">免费咨询表格</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							 <li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散"></li>
					         <li class="mui-table-view-cell"><span>职业：</span><input type="text" required="true" class="mui-input-clear" placeholder="销售员"></li>
					         <li class="mui-table-view-cell"><span>首次生育年龄：</span><input type="text" required="true" class="mui-input-clear" placeholder="24岁"></li>
					         <li class="mui-table-view-cell forward_right"><span>婚姻：</span><a href="#marriage" id="marriage_a" class="mui-navigate-right">未婚</a></li>
					         <li class="mui-table-view-cell"><span>月经史：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史"></li>
					         <li class="mui-table-view-cell"><span>既往病史：</span><input type="text" required="true" class="mui-input-clear" placeholder="既往病史"></li>
					         <li class="mui-table-view-cell"><span>家族史：</span><input type="text" required="true" class="mui-input-clear" placeholder="家族史"></li>
					         <li class="mui-table-view-cell"><span>个人史：</span><input type="text" required="true" class="mui-input-clear" placeholder="个人史"></li>
					         <li class="mui-table-view-cell forward_right"><span>主要症状：</span><a href="#symptom" id="symptom_a" class="mui-navigate-right">不孕不育</a></li>
						</ul>
						<div class="row mui-input-row illness">
							<h2>主要病情描述：</h2>
							<textarea id="question" class="mui-input-clear question" placeholder="请详细描述你的病情..."></textarea>
						</div>
						<div class="login_btn">
						        <a href="#img_free_dialogue">保存并上传图片</a>
					   </div>
						
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询选择图片-->
		<div id="img_free_dialogue" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span><!--协议-->
				</button>
				<h1 class="mui-center mui-title">图文咨询选择图片</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="imgs_li">
							<li>
						    	<h1><time pubdate="2015-01-02">2015-01-02</time></h1>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img active">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						    </li>
						</ul> 
					</div>
					<div class="pass_btn clear">
						<a href="##" class="mui-btn mui-btn-success mui-pull-left">取消</a>
						<a href="#edit_img" class="mui-btn mui-btn-warning mui-pull-right">确认</a>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询编辑图片-->
		<div id="edit_img" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">编辑图片</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="the_edit_img">
							<img src="../images/this_img.png" alt="this">
						   <div class="action_img">
						   		<h1>图片备注</h1>
						        <textarea id="textarea" rows="5" placeholder="对照片进行简单注释"></textarea>  
						       <div class="pass_btn clear">
						            <a href="#img_free_dialogue" class="mui-btn mui-btn-success mui-pull-left">上传并选择下一张</a>
						            <a href="#browse_report" class="mui-btn mui-btn-primary mui-pull-right">上传已完成的照片</a>
						        </div>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询浏览报告-->
		<div id="browse_report" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">浏览报告</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							 <li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>职业：</span><input type="text" required="true" class="mui-input-clear" placeholder="销售员" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>首次生育年龄：</span><input type="text" required="true" class="mui-input-clear" placeholder="24岁" readonly="true"></li>
					         <li class="mui-table-view-cell forward_right"><span>婚姻：</span><a href="##">未婚</a></li>
					         <li class="mui-table-view-cell"><span>月经史：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>既往病史：</span><input type="text" required="true" class="mui-input-clear" placeholder="既往病史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>家族史：</span><input type="text" required="true" class="mui-input-clear" placeholder="家族史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>个人史：</span><input type="text" required="true" class="mui-input-clear" placeholder="个人史" readonly="true"></li>
					         <li class="mui-table-view-cell forward_right"><span>主要症状：</span><a href="##">不孕不育</a></li>
						</ul>
						<div class="row mui-input-row illness">
							<h2>主要病情描述：</h2>
							<textarea id="question" class="mui-input-clear question_detail" placeholder="这里描述病情的详细信息..."></textarea>
						</div>
						<div class="screenshot">
							<!--<h2>医疗设备截图</h2>
							<div id='image-list' class="row image-list"></div>-->
						</div>
						<div class="send_report">
							<a href="#picture_consulting_dialog" class="mui-btn mui-btn-block">保存并发送</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询对话框-->
		<div id="picture_consulting_dialog" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">图文咨询对话</h1>
				<a href="#score_box" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right evaluate_btn" id="pic_evaluate">评分</a>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<article>
						   	<div class="kt_lxkf_dialog">
						    	<h1 class="kt_lxkf_dialog_time">您正在回答张靓女士的免费咨询问题<span></span></h1>
						        <div class="kt_lxkf_dialog_her">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao.png" alt="snajiao"></i>
						            	<p>亲爱的的用户朋友，有什么而要帮助您的吗？</p>
						            </div>
						        </div>
						        <div class="kt_lxkf_dialog_me">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao_right.png" alt="snajiao_right"></i>
						            	<p>是这样的，我的订单无法显示，请问是什么原因？</p>
						            </div>
						        </div>
						    </div>
						</article>
						
					</div>
				</div>
				<div class="dialog_input">
				    <span class="text_input mui-input-speech">
				    	<a href="##" class="sound_ico iconfont icon-yuyin"></a>
				    	<a href="##" class="add_img_ico iconfont icon-tupian"></a>
				    	<textarea rows="1" placeholder="对话"></textarea>
				    	<a href="##" class="mui-btn img_dialog_send">发送</a>
				    </span>
				</div>
			</div>
		</div>
		
		
	<div id="count" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">1</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">3</a>
			</li>
		</ul>
	</div>
	<div id="marriage" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">已婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">未婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">保密</a>
			</li>
		</ul>
	</div>
	<div id="symptom" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">不孕不育1</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育3</a>
			</li>
		</ul>
	</div>
	<div id="edit_marriage" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">不婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">未婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">保密</a>
			</li>
		</ul>
	</div>
	<div id="edit_symptom" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">无症状</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育3</a>
			</li>
		</ul>
	</div>
	<!--评分-->
		<div id="score_box" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="puluo_popover_box">
				<div class="puluo_popover_content">
					<div class="mui-puluo-title"><h1>请对王秋兰医生进行评价</h1></div>
					<div class="score_box">
					   <div class="score_in_box">
					    <span class="score_name">服务态度</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
					   <div class="score_in_box">
					    <span class="score_name">回复速度</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
					   <div class="score_in_box">
					    <span class="score_name">专业技能</span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score_star"><img src="../images/star.png" alt="star" /></span>
					    <span class="score">0</span>
					   </div>
				  </div>
				</div>
				  <div class="mui-popup-buttons"><span class="mui-popup-button">取消</span><span class="mui-popup-button mui-popup-button-bold">确认</span></div>
			</div>
		</div>
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.view.js "></script>
	<script src="../js/feedback-page.js"></script>
	<script src='../js/jquery-1.11.1.js'></script>
	<script src='../js/strophe-custom-2.0.0.js'></script>
	<script src='../js/json2.js'></script>
	<script src="../js/easemob.im-1.0.5.js"></script>
	<script src='../js/feedback.js'></script>
	<script src="../js/feedback-page.js"></script>
</body>
	<script>
		mui.init();
		//初始化单页view
			var viewApi = mui('#payApp').view({
				defaultPage: '#line'
			});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			mui(".score_in_box").on("tap",".score_star",selectCore);
			//选择评分
			function selectCore(){
					var index=null;
					var score_star=this.parentNode.querySelectorAll(".score_star");
					var star_length=score_star.length;
					for(var i=0;i<star_length;i++){
						if(score_star[i]==this){
							index=i+1;
						};
					};
					this.parentNode.querySelector(".score").innerHTML=index;
					for(i=0;i<index;i++){
						score_star[i].querySelector("img").src="../images/star_full.png";
						};
					for(i=index;i<star_length;i++){
						score_star[i].querySelector("img").src="../images/star.png";
						};
			};
			mui(".mui-popup-buttons").on("tap","span",function(e){
				var text=this.innerText;
				switch(text){
					case "确认":
					var scoreN='';
					var score_name=document.querySelectorAll(".score_box .score_name");
					for(var i=0;i<score_name.length;i++){
						scoreN+=score_name[i].innerHTML+"分:"+score_name[i].parentNode.querySelector(".score").innerHTML+"\n";
					};
					alert(scoreN);
					mui.trigger(document.querySelector(".mui-backdrop.mui-backdrop-action.mui-active"),'tap');
					break;
					default:
					alert("取消评分");
					mui.trigger(document.querySelector(".mui-backdrop.mui-backdrop-action.mui-active"),'tap');
					break;
					
				}
				
			});
		//选择数量
			mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个菜单
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if(parent.id){
					switch(parent.id){
					case "edit_marriage":
					document.querySelector("#edit_marriage_a").innerHTML =a.innerHTML;
					break;
					case "edit_symptom":
					document.querySelector("#edit_symptom_a").innerHTML =a.innerHTML;
					break;
					case "marriage":
					document.querySelector("#marriage_a").innerHTML =a.innerHTML;
					break;
					case "symptom":
					document.querySelector("#symptom_a").innerHTML =a.innerHTML;
					break;
					case "count":
					document.querySelector("#count_a").innerHTML =a.innerHTML;
					break;
					default:
					break
					}; 
					//关闭菜单
					mui('#' + parent.id).popover('toggle');
				};
			}
			
		});
		document.querySelector(".zffs>p").addEventListener("tap",function(){
			var classN=document.querySelector(".need_pay").className;
			if(this.className.indexOf("active")<0){
				this.className="active";
				document.querySelector(".need_pay").className=classN+" active";
			}else{
				this.className="";
				document.querySelector(".need_pay").className=classN.replace(/ active/g,"");
			};
		});
		
		document.querySelector(".now_pay>a").addEventListener("tap",function(e){
			var e=e||window.event;
			var _this=this;
			var href=this.href;
			var cf=confirm("数据保存好了吗？");
			if(!cf){
				this.href="";
				setTimeout(function(){
				_this.href=href;
			},500);
			};
			
		});
		
		//选择图片
		$(".imgs_li").on("tap",".this_img",function(){
			var this_img=$(".this_img");
			for(var i=0;i<this_img.length;i++){
				this_img[i].className=this_img[i].className.replace(/ active/g,"");
			};
			this.className+=" active";
		});
			
		})(mui);
	</script>

</html>